<template>
  <div class="page-infinite task-main" style="text-align: left;">
    <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
      <ul class="page-infinite-list"
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="50"
        style="margin: 0; padding-left: 20px; padding-right: 20px;"
      >
        <li v-for="item in list" class="page-infinite-listitem task-item">
          <div class="task-title">
            task title
          </div>
          <div class="task-value">
            ¥ 5
          </div>
          <div class="task-desc">
            这是任务描述这是任务描述这是任务描述这是任务描述
          </div>
          {{ item }}
        </li>
      </ul>
      <p v-show="loading" class="page-infinite-loading" style="text-align: center;">
        加载中...
      </p>
    </div>
  </div>
</template>
